import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { Table, Button, message } from 'antd';
import Modal from '../../../components/Modal/index';
import services from '../../../services/api';

@connect()
class MenuList extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      expandedRowKeys: [],
      oldExpand: []
    };
    this.api = 'menu';
  }

  static getDerivedStateFromProps (props, state) {
    if (JSON.stringify(props.expandedRowKeys) !== JSON.stringify(state.oldExpand)) {
      return {
        oldExpand: props.expandedRowKeys,
        expandedRowKeys: props.expandedRowKeys
      }
    }
    return null
  }

  componentDidMount() {}

  edit(record) {
    this.props.edit(record);
  }

  delete(record) {
    Modal.open({
      title: '',
      isConfirm: true,
      width: '300px',
      content: '确定要删除?',
      isOkBtn: true,
      isCancelBtn: true,
      ok: () => {
        services[this.api].delete({ id: record.id }).then(data => {
          if (data.code === 0) {
            message.success(data.msg);
            Modal.close();
            this.props.queryList();
            this.props.dispatch({ type: 'menu/queryMenu', params: {} });
          } else {
            message.error(data.msg);
          }
        });
      },
      cancel: () => {
        Modal.close();
      }
    });
  }

  handleExpand = (expanded, record) => {
    const { expandedRowKeys } = this.state
    if (expanded) {
      let newArr = [...expandedRowKeys, record.id ]
      this.setState({ expandedRowKeys: newArr })
    } else {
      let newArr = [...expandedRowKeys]
      let index = newArr.indexOf(record.id)
      newArr.splice(index, 1)
      this.setState({ expandedRowKeys: newArr })
    }
  }

  render() {
    const columns = [
      {
        title: '菜单名称',
        dataIndex: 'name',
        key: 'name'
      },
      {
        title: '菜单路由',
        dataIndex: 'route',
        key: 'route'
      },
      {
        title: '菜单Icon',
        dataIndex: 'icon',
        key: 'icon'
      },
      {
        title: '排序',
        dataIndex: 'seq',
        key: 'seq'
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record, index) => {
          return (
            <div className='table-action'>
              <Button size='small' type='link' onClick={this.edit.bind(this, record)} disabled={record.parent_id === 0}>
                编辑
              </Button>
              <Button
                type='link'
                size='small'
                disabled={record.children && record.children.length > 0}
                onClick={this.delete.bind(this, record)}
              >
                删除
              </Button>
            </div>
          );
        }
      }
    ];

    // const rowSelection = {
    //   columnWidth: 30,
    //   onChange: (selectedRowKeys, selectedRows) => {
    //     console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    //   },
    //   onSelect: (record, selected, selectedRows) => {
    //     console.log(record, selected, selectedRows);
    //   },
    //   onSelectAll: (selected, selectedRows, changeRows) => {
    //     console.log(selected, selectedRows, changeRows);
    //   }
    // };

    return (
      <div>
        {this.props.data ? (
          <Table
            columns={columns}
            // rowSelection={rowSelection}
            dataSource={this.props.data}
            rowKey='id'
            expandedRowKeys={this.state.expandedRowKeys}
            onExpand={this.handleExpand}
          />
        ) : (
          '暂无数据'
        )}
      </div>
    );
  }
}

export default MenuList;
